<template>
  <view class="activity-btns-group">
    <template v-if="importType === 'manage'">
      <TButton
        v-if="showVerificationBtn"
        text="核验签到"
        custom-class="borderBtn h-30 linh-30 br-30 "
        @click="handleToVerification"
      />
      <view class="manage-btn">
        <TButton
          text="活动管理"
          custom-class="borderBtn h-30 linh-30 br-30"
          @click="emit('manage')"
        />
        <view class="num" v-if="item.waitingReviewNum">
          {{ item.waitingReviewNum >= 99 ? '99+' : item.waitingReviewNum }}
        </view>
      </view>
    </template>
    <template v-else-if="importType === 'query'">
      <TButton
        text="活动安排"
        custom-class="borderBtn h-30 linh-30 br-30 "
        @click="emit('arrange')"
      />
      <TButton
        text="参会证"
        custom-class="borderBtn h-30 linh-30 br-30 "
        @click="emit('certificate')"
      />
    </template>
  </view>
</template>

<script setup lang="ts">
  import { computed, type PropType } from 'vue';
  import { type IActivityListResData } from '@/api/activity/types';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { ActivityStatusEnum, PublishStatusEnum } from '@/enums/activityStatusEnum';
  import { navigateTo } from '@/router';
  const emit = defineEmits(['manage', 'share', 'arrange', 'certificate']);

  const props = defineProps({
    importType: {
      type: String as PropType<'manage' | 'query'>,
      default: '',
    },
    item: {
      type: Object as PropType<IActivityListResData>,
      required: true,
    },
  });

  const showVerificationBtn = computed(() => {
    return [
      ActivityStatusEnum.REGISTRATION_END,
      ActivityStatusEnum.REGISTRATION_NOTSTARTED,
      ActivityStatusEnum.REGISTRATION_UNDERWAY,
      ActivityStatusEnum.START,
      ActivityStatusEnum.REGISTRATION_NOTSTARTED,
    ].includes(props.item.activityStatus);
  });

  function handleToVerification() {
    navigateTo({
      name: 'adminSignedIt',
      options: {
        activityId: props.item.id,
        activityTitle: props.item.title,
      },
    });
  }
</script>

<style lang="scss" scoped>
  .activity-btns-group {
    display: flex;
    justify-content: flex-end;
    gap: 24rpx;
    .manage-btn {
      position: relative;
      .num {
        box-sizing: border-box;
        position: absolute;
        right: -16rpx;
        top: -16rpx;
        width: 44rpx;
        height: 44rpx;
        border-radius: 50%;
        background: #ea5e0e;
        box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.2);
        font-size: 20rpx;
        color: #fff;
        line-height: 28rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
